<template>
  <div>
      <basic-dialog :visible="show"
                    title="添加保养项目"
                    :isShowInnerLoading="isShowInnerLoading"
                    min-width="800px"
                    isShowBasicFooter
                    @submit="submit"
                    @close="onClose"
      >
      <div class="form-inline" style="padding: 20px 20px 10px;">
        <div>保养类型: {{$getEnum(Enums.MAINTENANCE_TYPE, $attrs.maintenanceType).desc}}</div>
      </div>
      <div class="page-content">
          <q-table :data="tableData"
                       :columns="columns"
                       row-key="id"
                       class="myTable scroll stick-to-top inherit"
                       :loading="isTableLoading"
                       :pagination.sync="pagination"
                       style="max-height: 400px"
                       selection="single"
                       :selected.sync="selected"
                       no-data-label="暂无数据"
                       :hide-bottom="tableData.length > 0"
                       color="primary">
              <template v-slot:no-data>
                  <div class="full-width row flex-center font-size-14" style="color: #999">
                    暂无数据
                  </div>
              </template>
          </q-table>
      </div>
      </basic-dialog>
    <!-- 设备选择 -->
  </div>
</template>
<script>
import { getMaintenaceProgramsList } from 'src/boot/maintenance/maintenance-item'
import _ from 'lodash'
export default {
  name: 'maintenance-program-dialog',
  props: {
    show: Boolean
  },
  computed: {
  },
  data () {
    return {
      workshopId: 'all',
      isShowInnerLoading: false,
      isTableLoading: false,
      selected: [],
      tableData: [],
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'name', label: '项目名称', align: 'left', field: 'name' },
        { name: 'deviceTypeName', label: '设备类型', align: 'left', field: 'deviceTypeName' },
        { name: 'maintenanceTypeName', label: '保养类型', align: 'left', field: 'maintenanceTypeName' }
      ]
    }
  },
  mounted () {},
  watch: {
    show (newPro) {
      this.initData()
      newPro && this.getList()
    }
  },
  methods: {
    initData () {
      this.selected = []
      this.tableData = []
    },
    submit () {
      if (_.isEmpty(this.selected)) {
        this.$message.warning('请选择保养项目')
        return
      }
      this.$emit('submit', this.selected)
    },
    onClose () {
      this.$emit('close')
    },
    getList () {
      const params = {
        maintenanceType: this.$attrs.maintenanceType,
        sort: 0
      }
      this.isShowInnerLoading = true
      getMaintenaceProgramsList(params).then(res => {
        this.isShowInnerLoading = false
        this.tableData = res.data.list
      }).catch(err => {
        this.isShowInnerLoading = false
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
